Angular Material এমন একটি UI লাইব্রেরি যা Material Design গাইডলাইন অনুসরণ করে তৈরি। এটি রেসপন্সিভ ডিজাইনের জন্য কার্যকরী কম্পোনেন্ট এবং সরঞ্জাম প্রদান করে। Angular Material এর Breakpoints সিস্টেম ব্যবহার করে আপনি সহজেই অ্যাপ্লিকেশনের লেআউটকে বিভিন্ন স্ক্রীন সাইজে অ্যাডজাস্ট করতে পারেন, যা একটি রেসপন্সিভ এবং মোবাইল-ফ্রেন্ডলি ডিজাইন নিশ্চিত করে।

Breakpoints এবং Responsiveness

Breakpoints হলো স্ক্রীনের আকার নির্ধারণের পয়েন্ট, যেখানে লেআউটের বিভিন্ন অংশে পরিবর্তন আসে। অ্যাঙ্গুলার ম্যাটেরিয়াল CSS Media Queries ব্যবহার করে এগুলো পরিচালনা করে এবং ভিন্ন ভিন্ন সাইজের স্ক্রীনের জন্য উপযুক্ত UI উপাদান দেখায়। Angular Material রেসপন্সিভ ডিজাইন এবং লেআউট ম্যানেজমেন্টের জন্য Breakpoints এবং Grid List সিস্টেম ব্যবহার করে।

১. Angular Material এর Breakpoints

Angular Material-এর Breakpoints সিস্টেমের সাহায্যে আপনি বিভিন্ন স্ক্রীন সাইজের জন্য ডিজাইন কাস্টমাইজ করতে পারেন। Angular Material এ কিছু পূর্বনির্ধারিত Breakpoints রয়েছে, যা স্ক্রীন সাইজের উপর ভিত্তি করে লেআউট পরিবর্তন করতে ব্যবহৃত হয়:

• xs: এক্সট্রা স্মল (একক কলাম, মোবাইল ডিভাইস)
• sm: স্মল (ট্যাবলেট ডিভাইস)
• md: মিডিয়াম (ডেস্কটপ)
• lg: লার্জ (বড় স্ক্রীন)
• xl: এক্সট্রা লার্জ (বড় ডেস্কটপ)

২. Angular Material Grid List এবং Breakpoints

Angular Material এর Grid List কম্পোনেন্ট ব্যবহারের মাধ্যমে আপনি রেসপন্সিভ গ্রিড তৈরি করতে পারেন, যা বিভিন্ন স্ক্রীন সাইজের জন্য উপযুক্ত লেআউট প্রদান করে।

Grid List ব্যবহার করার উদাহরণ:

<mat-grid-list cols="3" rowHeight="2:1">
  <mat-grid-tile>১</mat-grid-tile>
  <mat-grid-tile>২</mat-grid-tile>
  <mat-grid-tile>৩</mat-grid-tile>
</mat-grid-list>

এখানে, cols="3" দ্বারা নির্ধারণ করা হয়েছে যে, গ্রিডে মোট ৩টি কলাম থাকবে। তবে, যখন স্ক্রীন ছোট হবে (যেমন মোবাইল ডিভাইস), তখন এটি স্বয়ংক্রিয়ভাবে ১ কলামে পরিবর্তিত হবে।

৩. Breakpoints কনফিগারেশন

আপনি চাইলে CSS Media Queries বা Angular's Layout API ব্যবহার করে নিজস্ব Breakpoints কনফিগার করতে পারেন। Angular Material এ Breakpoints কনফিগার করার জন্য @angular/flex-layout প্যাকেজ ব্যবহার করা হয়, যা ব্রেকপয়েন্টস এবং রেসপন্সিভ লেআউট সহজ করে।

উদাহরণ: Flex Layout ব্যবহার করে Breakpoints

@angular/flex-layout প্যাকেজটি ইনস্টল করার পর, এটি ব্যবহার করে আপনি রেসপন্সিভ ডিজাইন সহজেই তৈরি করতে পারবেন।

1. @angular/flex-layout ইন্সটল করা

npm install @angular/flex-layout

2. Flex Layout ব্যবহার করা

<div fxLayout="row" fxLayout.lt-md="column">
  <div fxFlex>Item 1</div>
  <div fxFlex>Item 2</div>
  <div fxFlex>Item 3</div>
</div>

এখানে:

• fxLayout="row": একাধিক উপাদানকে রূপান্তরিত করে এক লাইনে দেখায়।
• fxLayout.lt-md="column": যখন স্ক্রীনের আকার মিডিয়াম বা তার কম হবে (যেমন ট্যাবলেট বা মোবাইল), তখন উপাদানগুলো কলামে সাজানো হবে।

৪. Breakpoints ব্যবহার করে রেসপন্সিভ স্টাইলিং

এছাড়া, আপনি CSS Media Queries ব্যবহার করে রেসপন্সিভ ডিজাইন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনার অ্যাপ্লিকেশনকে আরও রেসপন্সিভ করার জন্য CSS ব্রেকপয়েন্ট যোগ করা:

@media (max-width: 600px) {
  .my-class {
    display: block;
  }
}

@media (min-width: 600px) and (max-width: 960px) {
  .my-class {
    display: flex;
  }
}

এখানে, max-width: 600px নির্দেশ করে যে স্ক্রীন যদি 600px বা তার কম হয় (যেমন মোবাইল ডিভাইস), তাহলে my-class উপাদানটি ব্লক ডিসপ্লে হবে, এবং min-width: 600px and max-width: 960px নির্দেশ করে যে স্ক্রীন যদি 600px থেকে 960px এর মধ্যে হয় (যেমন ট্যাবলেট), তখন এটি ফ্লেক্স ডিসপ্লে হবে।

Angular Material এর রেসপন্সিভিটি এবং Flex Layout

Angular Material রেসপন্সিভ ডিজাইনের জন্য Flex Layout এবং Grid List ব্যবহার করে গ্রিড, লেআউট এবং উপাদান সাইজের সাথে খুব সহজে কাজ করতে পারবেন।

• Flex Layout: এটি একটি খুব শক্তিশালী টুল যা রেসপন্সিভ লেআউট তৈরি করতে ব্যবহৃত হয়। এটি flexbox ভিত্তিক এবং ব্রেকপয়েন্ট এবং লেআউট সিস্টেম ব্যবহার করে বিভিন্ন ডিভাইসের জন্য উপযুক্ত ডিজাইন তৈরি করতে সহায়ক।
• Grid List: এটি একটি রেসপন্সিভ গ্রিড তৈরি করতে ব্যবহৃত হয়। এটি গ্রিডের কলাম সংখ্যা এবং রো-হাইট কনফিগার করার মাধ্যমে ডিভাইস অনুযায়ী উপাদানগুলোর লেআউট কনফিগার করে।

Angular Material এর Breakpoints এবং Responsiveness সিস্টেম ব্যবহার করে আপনি সহজেই রেসপন্সিভ ডিজাইন তৈরি করতে পারেন, যা মোবাইল, ট্যাবলেট এবং ডেস্কটপ ডিভাইসের জন্য উপযুক্ত। Flex Layout এবং Grid List ব্যবহার করে রেসপন্সিভ লেআউট এবং কাস্টম ডিজাইন খুব সহজেই তৈরি করা সম্ভব, যা অ্যাপ্লিকেশনকে বিভিন্ন স্ক্রীন সাইজে সুগম এবং আকর্ষণীয় করে তোলে।